<template>
  <div id="song-data">
    <!-- 是title -->
    <div v-if="isTitle" :class="{ title: isTitle }">
      <div class="index"></div>
      <div class="operation">{{ songData.operation }}</div>
      <div class="name">{{ songData.name }}</div>
      <div class="singer">{{ songData.singer }}</div>
      <div class="album">{{ songData.album }}</div>
      <div class="duration">{{ songData.duration }}</div>
      <div class="test"></div>
    </div>
    <!-- 不是title -->
    <div
      v-else
      :class="{ isEven: index % 2 === 0, isActive: isActive }"
      @click="isClick">
      <div class="index">{{ index | doubleDigit }}</div>
      <div class="serial-number">{{ songData.index | doubleDigit }}</div>
      <div class="operation">{{ songData.operation }}</div>
      <div class="name">{{ songData.name }}</div>
      <div class="singer" v-if="songData.ar || songData.artists">
        <span
          v-for="(item, index) in (songData.ar || songData.artists)"
          :key="index">
          {{ item.name }}
        </span>
      </div>
      <div class="album">{{ (songData.al && songData.al.name) || songData.album.name }}</div>
      <div class="duration">{{ songData.dt || songData.duration | timeFormat }}</div>
      <div class="test"></div>
    </div>
  </div>
</template>

<script>
import { doubleClick, _setInterval } from 'utils'
import types from 'utils/types.js'

export default {
  name: 'SongData',
  data () {
    return {
      isActive: false,
      songDoubleClick: null,
      songDetail: null
    }
  },
  props: {
    songData: {
      type: Object,
      default () {
        return {}
      }
    },
    isTitle: {
      type: Boolean,
      default () {
        return false
      }
    },
    index: {
      type: Number
    }
  },
  filters: {
    // 1. 不足两位补0
    doubleDigit (index) {
      if (index === undefined) return ''
      return ('' + index).padStart(2, '0')
    }
  },
  created () {
    this._getDoubleClick()
  },
  mounted () {
    this.$emit('dataLoad')
  },
  methods: {
    isClick () {
      // 双击触发
      this.songDoubleClick()
      // 把其他的都取消active
      if (!this.isActive) {
        this.$emit('cancelActive')
        this.isActive = true
      }
    },
    // 2. 取消active
    cancelActive () {
      this.isActive = false
    },
    // 3. 双击
    _getDoubleClick () {
      this.songDoubleClick = doubleClick(async () => {
        // console.log(this.songData)
        // 如果是已经在播放的歌曲, 则不执行
        if (this.$store.state.playInfo.songData && this.$store.state.playInfo.songData.id === this.songData.id) {
          // return this.$audio.play()
          return false
        }
        this.playSong()
      })
    },
    // 4. 播放歌曲
    async playSong () {
      const result = await this.$http.get(`/song/url?id=${this.songData.id}`)
      // console.log(result.data)
      // 获取失败
      if (result.status !== 200 || result.data.code !== 200) {
        return this.$message.info('获取歌曲失败')
      }
      // 获取成功
      console.log(result)
      this.$audio.src = result.data.data[0].url
      this.$audio.play()
      // 因为_setInterval内置了清空原有计时器所以不用clearTimeout
      _setInterval(() => { this.$store.commit(types.ADD_TIMER) }, 1000, this.$timerId)
      // 判断是搜索的songData还是歌单中获取的songData => 检查是由有al属性
      if (this.songData.al) {
        this.$store.commit(types.PLAY_SONG, this.songData)
      } else {
        this.$store.commit(types.PLAY_SONG, await this.getSongDetail())
      }
    },
    // 不是由songData直接传入全部数据时(只含有搜索歌曲的参数)再获取详细的数据
    async getSongDetail () {
      const result = await this.$http.get(`/song/detail?ids=${this.songData.id}`)
      if (result.status !== 200 || result.data.code !== 200) return this.$message.info('获取歌曲详情失败')
      // 获取成功
      // console.log(result)
      this.songDetail = result.data.songs[0]
      return result.data.songs[0]
    }
  }
}
</script>

<style scoped lang="less">
#song-data {
  color: #666;
  user-select: none;
  width: 100%;
  > div {
    display: flex;
    font-size: 12px;
    color: #666;
    line-height: 32px;
    &.isEven {
      background-color: #f5f5f7;
    }
    &:hover {
      background-color: #ebeced;
      color: #111;
    }
    &.isActive {
      background-color: #e3e3e5;
      color: #111;
      .index {
        color: #111
      }
    }
    // 超过隐藏
    > div {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      padding-left: 10px;
    }
    .index {
      width: 50px;
      text-align: right;
      padding-right: 5px;
      color: #a599a5;
    }
    .operation {
      width: 60px;
    }
    .name {
      flex: 13;
      color: #111;
    }
    .singer {
      flex: 9;
      span {
        position: relative;
        margin-right: 4px;
        &:nth-last-of-type(n+2):after {
          position: absolute;
          right: -3px;
          content: "/";
        }
      }
    }
    .album {
      flex: 8;
    }
    .duration {
      width: 110px;
    }
    &.title {
      background-color: #fafafa;
      border-bottom: 1px solid #e1e1e2;
      > div {
        border-right: 1px solid #e1e1e2;
        &:nth-last-of-type(1) {
          border: none;
        }
      }
    }
    .test {
      flex: 2;
      display: none;
    }
  }
}
</style>
